<template>
	<view class="container">
		<view class="uni-status-bar" style="background:#fff;"></view>
		<!--  #ifdef  APP-PLUS -->
		<view class="" style="background:#fff;height:48rpx;"></view>
		<!--  #endif -->
		<view class="banner">
			<swiper class="swiper" indicator-color="#C0C0C0" indicator-active-color="#57586E" circular="true"
				autoplay="true" duration="500" interval="20000" @change="change">
				<swiper-item class="swiper-item" v-for="(item, index) in carouselsData" :key="index">
					<image class="img" :lazy-load="true" mode="scaleToFill" :src="getImageUrl(item.image)"
						@click="openWeb(item.url)"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="notice-wrap" @click="onNative('/pages/information/index')">
			<hb-notice class="notice" type="Announcement"></hb-notice>
		</view>
		<view class="block row taburl">
			<view class="cols" v-for="item in taburls" @click="onNative(item.url)"
				style="width:25%;text-align: center;">
				<image :src="item.images" mode="" class="flexIcon"></image>
				<view class="text pd10">{{item.title}}</view>
			</view>
		</view>
		<view class="block pool">
			<view class="bgTitle"> POOL <text></text></view>
			<view class="row" style="margin-top:24rpx;">
				<view class="col">
					<view class="gray">{{$t('my.allNumerary')}}</view>
					<view class="black">{{Number(pool.btc_phs)}}{{pool.btc_phs_wei}}</view>
				</view>
				<view class="col">
					<view class="gray">{{$t('home.miningDifficulty')}}</view>
					<view class="black">{{pool.btc_dig}}{{pool.btc_dig_wei}}</view>
				</view>
				<view class="col">
					<view class="gray">{{$t('home.numAddress')}}</view>
					<view class="black">{{Number(pool.btc_address)}}</view>
				</view>
			</view>
		</view>
		<view class="block">
			<view class="bgTitle">{{$t('index.platform')}} <text></text></view>
			<view class="operate flexSpace">
				<view class="left">
					<image src="@/static/home/operate.png"></image>
				</view>
				<view class="right">
					<view class="item">
						<view class="num">{{configs.day_num}}{{$t('day')}}</view>
						<view class="text">{{$t('index.platformDays')}}</view>
					</view>
					<view class="item">
						<view class="num">{{configs.people_num}}{{$t('info.people')}}</view>
						<view class="text">{{$t('index.platformUsers')}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="ad-pop" v-if="isEleFees">
			<view class="content">
				<view class="title">
					{{$t('home.feesTitle')}}
					<view class="close" @click="isEleFees = !isEleFees"> <img src="@/static/home/close.png" alt="">
					</view>
				</view>
				<view class="praph">
					{{$t('home.feesTips')}}
				</view>
				<view class="btn" @click="onNative('/pages/electFees/index')">
					{{$t('home.Renewal')}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		imageUri
	} from '@/plugin/image-url'
	import {
		userLogout
	} from '@/api/user';
	import {
		carousels,
		Filfox,
		ad
	} from '@/api/home'
	import {
		uploadPackage
	} from '@/api/configs'
	import base64Code from '@/plugin/base64code.js';
	import {
		menu
	} from '@/api/menu'
	import HbNotice from "@/components/hb-notice";
	import {
		mapState
	} from 'vuex'
	import HbAppUpdate from "./hb-app-update";
	import {
		electTips
	} from '@/api/electFees.js'

	export default {
		components: {
			HbNotice
		},
		data() {
			return {
				isEleFees: false, 
				news: '',
				systemLocale: '',
				applicationLocale: '',
				isAndroid: '',
				carouselsData: [], //banner
				currentBanner: '0',
				taburls: [{
						images: '/static/icon/charge.png',
						title: this.$t('yuebao.charge'),
						url: "/pages/my/charge-money/index?coin=USDT"
					},
					{
						images: '/static/icon/share.png',
						title: this.$t('share'),
						url: "/pages/share/index"
					},
					{
						images: '/static/icon/order.png',
						title: this.$t('order'),
						url: "/pages/contract/transaction-record"
					},
					{
						images: '/static/icon/fees.png',
						title: this.$t('home.Renewal'),
						url: "/pages/electFees/index"
					}
				],
				pool: {}, //pool -数据
				adData: null,
				pullDownLoading: false, // 下拉刷新loading
				isType: '', //手机类型
				isCheck: true, //是否显示下载app
			}
		},
		computed: {
			...mapState({
				configs: state => state.config.configs
			})
		},
		onLoad() {

		},
		onShow() {
			this.isAndroidOrIOS();
			this.getCarousels();
			this.getAd();
			this.getElectTips()
		},
		created() {},
		methods: {
			cale() {
				this.isCheck = false
			},
			isAndroidOrIOS() {
				this.isType = uni.getSystemInfoSync().platform
			},
			getElectTips() {
				electTips().then(res => {
					if (res.code == 1000) {
						if (res.data.is_show == 1) {
							this.isEleFees = true
						} else {
							this.isEleFees = false
						}
					}
				})
			},
			getAd() {
				ad().then((res) => {
					if (res.data != '') {
						this.adData = res.data;
						this.adPop = true
					} else {
						this.adPop = false;
					}
				})
			},
			onUpdateCancel() {
				uni.showTabBar();
				this.getUserInfo();
				uni.setStorageSync('updateStatus', {
					d: true,
					t: new Date().getTime() + 86400000
				});
				this.updateStatus = false;
			},
			gettabUrl() {
				menu().then(res => {
					if (res.code == '1000') {
						this.taburls = res.data[0].child
					}
				})
			},
			//banner
			getCarousels() {
				carousels().then((res) => {
					this.carouselsData = res.data
				})
			},
			change(e) {
				this.currentBanner = e.detail.current
			},
			getImageUrl(url) {
				return imageUri + url;
			},
			openWeb(url) {
				if (url) {
					uni.navigateTo({
						url: '/pages/web-activity/index' + '?url=' + url
					});
				}
			},
			onNative(e) {
				uni.navigateTo({
					url: e
				})
			},
		},
		onPullDownRefresh() {
			//下拉刷新
			this.pullDownLoading = true;
			this.getCarousels();
			this.getAd();
		},
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		background: rgba(247, 248, 250, 1);
	}
	// h5
	.h5Fix {
		position: fixed;
		right: 0;
		width: 100%;
		height: 256rpx;
		bottom: 130rpx;
		z-index: 5;
		text-align: right;
		font-size: 28rpx;
	
		&.h5Fix1 {
			height: 128rpx;
		}
	
		.content {
			width: 686rpx;
			margin: auto;
			height: 100%;
			background: rgba(56, 56, 56, 1);
			border-radius: 16rpx;
			position: relative;
	
			.fix {
				width: 622rpx;
				margin: auto;
				display: flex;
				justify-content: space-between;
				padding: 40rpx 0;
				color: rgba(201, 164, 138, 1);
				font-size: 24rpx;
	            align-items: center;
				&.lines {
					border-bottom: 1px solid rgba(255, 255, 255, .2);
					padding-top: 60rpx;
				}
	
				.big {
					width: 40rpx;
					height: 20rpx;
				}
	
				.img {
					width: 28rpx;
					height: 34rpx;
					display: inline-block;
					margin:-5rpx 8rpx;
				}
			}
	
			.cale {
				position: absolute;
				top: 10rpx;
				left: 12rpx;
				width: 32rpx;
				height:32rpx;
	
				image {
					width: 100%;
					height:100%;
				}
	
			}
		}
	
		.btn {
			display: inline-block;
			width: 180rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			margin: 0 20rpx;
			background: #0077AA;
			color: #fff;
			border-radius: 10rpx;
		}
	}

	.notice-wrap {
		padding: 10rpx 32rpx;
		background-color: #ffffff;
		margin-bottom: 16rpx;
	}

	.locale-list {
		position: fixed;
		right: 0;
		top: 50%;
		background: rgba(0, 0, 0, .5);
		width: 100rpx;
		height: 100rpx;
		font-size: 24rpx;
		color: #fff;
		border-radius: 16rpx;
		line-height: 40rpx;
	}

	.banner {
		padding: 24rpx 32rpx 24rpx;

		.swiper {
			width: 100%;
			height: 352rpx;

			// background: #f00;
			.swiper-item {
				border-radius: 16rpx;
				height: 352rpx !important;

				.img {
					display: block;
					width: 100%;
					height: 100%;
					margin: 0 auto;
				}
			}
		}
	}

	.taburl {
		padding: 50rpx 0;
	}

	.bgTitle {
		font-size: 32rpx;
		font-family: HarmonyOS_Sans_SC_Bold;
		margin-bottom: 32rpx;
		position: relative;

		text {
			position: absolute;
			width: 40rpx;
			height: 5rpx;
			background: $hb-primary-color;
			border-radius: 16rpx;
			left: 0;
			bottom: -10rpx;
		}
	}

	.pool {
		.row {
			background: rgba(247, 248, 250, 1);
			border-radius: 8rpx;
			font-size: 24rpx;
			padding: 32rpx 0;

			.col {
				flex: 1;
			}

			.gray {
				color: $hb-text-gray-color;
			}

			.black {
				font-size: 24rpx;
				color: $hb-text-black-color;
				padding-top: 10rpx;
			}
		}
	}

	.operate {
		.left {
			background: rgba(196, 196, 196, 1);
			width: 208rpx;
			height: 228rpx;
			border-radius: 8rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			width: 454rpx;

			.item {
				height: 106rpx;
				// background:rgba(196, 196, 196, 1);
				border-radius: 8rpx;
				color: #fff;
				line-height: 40rpx;
				background: url(@/static/home/operate2.png)no-repeat;
				background-size: contain;
				padding-left: 140rpx;

				&:first-child {
					margin-bottom: 16rpx;
					background: url(@/static/home/operate1.png)no-repeat;
					background-size: contain;
				}

				.num {
					font-size: 26rpx;
					padding-top: 16rpx;
					color: rgba(120, 84, 23, 1);
				}

				.text {
					font-size: 24rpx;
					color: rgba(120, 84, 23, 1);
				}
			}
		}
	}

	.ad-pop {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 9;
		padding: 0 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.5);

		.content {
			width: 532rpx;
			height: 454rpx;
			background: url(@/static/home/fees.png)no-repeat;
			background-size: contain;

			.title {
				font-size: 36rpx;
				color: #262628FF;
				text-align: center;
				padding: 40rpx 0;
				position: relative;
			}

			.close {
				position: absolute;
				right: 40rpx;
				top: 46rpx;
				color: #262628FF;

				img {
					width: 28rpx;
				}
			}

			.praph {
				padding: 20rpx 40rpx 70rpx;
				font-size: 24rpx;
				color: #61636FFF;
				line-height: 40rpx;
			}

			.btn {
				width: 320rpx;
				height: 70rpx;
				background: rgba(249, 85, 84, 1);
				box-shadow: 0px 5px 9px 0px rgba(249, 85, 84, 0.4);
				margin: auto;
				color: #fff;
				text-align: center;
				line-height: 70rpx;
				border-radius: 40rpx;
			}
		}
	}

	@keyframes mymove {
		from {
			transform: scale(0);
		}

		to {
			transform: scale(1);
		}
	}

	.addpop {
		animation: mymove .5s;
	}
</style>
